<template>
  <div class="all">
    <div class="top">
      <header>
        <div class="div" >
<!--          <img src="../../assets/返回.png" alt="">-->
<!--          <span class="solid">返回</span>-->
        </div>
        <div class="div">
          <span>实名认证</span>
        </div>
        <div class="div">
          <span></span>
        </div>
      </header>
      <div class="menu">
        <el-steps :active="menuIndex" align-center>
          <el-step title=""
                   v-for="(item, index) in menuList"
                   :key="index"
                   @click.native="changeMenu(index, url)"
                   process-status="success"
                   :description="item.title">
            <template #icon>
              <div v-if="menuIndex >= index" style="width: 15px;height: 15px;">
                <img src="../../assets/步骤选择.png" style="width: 15px;height: 15px;" alt="">
              </div>
              <div v-else style="width: 6px;height: 15px;background: #1DA4F2;display: flex;align-items: center;justify-content: center">
                <a style="width: 6px;height: 6px;border-radius: 50%;background: white;display: flex;position: absolute;"></a>
              </div>
            </template>
          </el-step>
        </el-steps>
      </div>
      <div class="tips">完成实名认证后，可开通咨询服务，管理您的患者档案</div>
    </div>
    <div class="title">
      <a class="hengGang"></a>
      身份证照片
    </div>
    <div class="describe">
      上传本人身份证正反面照片
    </div>
    <div class="imgDiv">
      <van-uploader  max-count="1"
                     upload-text="上传身份证正面"
                     :upload-icon="require('../../assets/身份证正面.jpg')"
                     v-model="realNameInfo.frontFileList"
                     :after-read="uploadIDcardFront"
      ></van-uploader>
      <van-uploader  max-count="1"
                     upload-text="上传身份证反面"
                     :upload-icon="require('../../assets/身份证反面.jpg')"
                     v-model="realNameInfo.reverseFileList"
                     :after-read="uploadIDcardBack"
      ></van-uploader>
    </div>
    <van-field  type="text" v-model="realNameInfo.STAFF_NAME" label="姓名" input-align="right"  readonly />
    <van-field  type="text" v-model="realNameInfo.SEX"  label="性别" input-align="right"  readonly />
    <van-field  type="text" v-model="realNameInfo.nation"  label="民族" input-align="right"  readonly />
    <van-field  type="text" v-model="realNameInfo.BIRTHDAY"  label="出生" input-align="right" readonly  />
    <van-field  type="text" v-model="realNameInfo.xiangxiAddress" label="住址" input-align="right" readonly  />
    <van-field  type="text" v-model="realNameInfo.shenfenzheng"  label="公民身份号码" input-align="right" readonly  />
    <van-field  type="text" v-model="realNameInfo.jiguan"  label="签发机关" input-align="right"  readonly />
    <van-field  type="text" v-model="realNameInfo.qixian"  label="有效期限" input-align="right"  readonly />

    <div class="sign">证件照片仅用于实名认证，平台将添加水印保证您的信息安全</div>
    <div class="bottom">
      <button class="keepButton lastStep"   @click="lastStep">上一步</button>
      <button class="keepButton next"  @click="submit">提交认证</button>
    </div>
    <van-dialog v-model="submitShow"
                width="80%"
                confirm-button-color="#1da4f2"
                title="提交认证"
                message="确认资料信息已经填写完整，提交认证？"
                @confirm="submitConfirm()"
                show-cancel-button>
    </van-dialog>
  </div>
</template>

<script>
import lrz from 'lrz'
import {Toast} from 'vant'
export default {
  name: 'RealNameInfomation',
  data () {
    return {
      menuIndex: 2,
      menuList: [
        {
          title: '执业信息',
          url: '/CareerInformation'
        }, {
          title: '执业证书',
          url: '/PracticeCertificate'
        }, {
          title: '实名信息',
          url: '/RealNameInfomation'
        }
      ],
      realNameInfo: {
        STAFF_NAME: '',
        SEX: '',
        nation: '', // 民族
        BIRTHDAY: '', // 出生年月日
        xiangxiAddress: '', // 详细住址
        shenfenzheng: '', // 身份证号
        jiguan: '', // 签发机关
        qixian: '', // 有效期限
        frontFileList: [],
        reverseFileList: [],
        IDNUM_FRONT_PIC: '', // 身份证正面图片
        IDNUM_BACK_PIC: '' // 身份证反面图片
      },
      isSendFront: true,
      isSendBack: true,
      submitShow: false
    }
  },
  computed: {
  },
  mounted () {
    let data = JSON.parse(sessionStorage.getItem('realNameData'))
    if (data) {
      if (data.realNameInfo) {
        this.realNameInfo = data.realNameInfo
        if (this.realNameInfo.IDNUM_FRONT_PIC) {
          this.getIDfront(this.realNameInfo.IDNUM_FRONT_PIC)
        }
        if (this.realNameInfo.IDNUM_BACK_PIC) {
          this.getIDback(this.realNameInfo.IDNUM_BACK_PIC)
        }
      }
    }
  },
  methods: {
    // 上一步
    lastStep () {
      this.ForData()
      this.$router.replace({path: this.menuList[this.menuIndex - 1].url})
    },
    // 提交确认
    submitConfirm () {
      let JSONdata = JSON.parse(sessionStorage.getItem('realNameData'))
      let first = JSONdata.CareerInfo
      let second = JSONdata.PracticeInfo
      let third = JSONdata.realNameInfo
      let SEX
      if (third.SEX == '男') {
        SEX = 1
      } else if (third.SEX == '女') {
        SEX = 2
      }
      let Zlist = []
      // 执业证书图片 1
      if (second.PRACTICE_CERTIFICATE_PIC.length > 0) {
        second.PRACTICE_CERTIFICATE_PIC.map((curr, index) => {
          let obj = {
            img_url: curr,
            img_type: 1
          }
          Zlist.push(obj)
        })
      }

      // 职称证书图片 2
      if (second.TITLE_CERTIFICATE_PIC.length > 0) {
        second.TITLE_CERTIFICATE_PIC.map((curr, index) => {
          let obj = {
            img_url: curr,
            img_type: 2
          }
          Zlist.push(obj)
        })
      }
      // 身份证正面图片
      let front = {
        img_url: third.IDNUM_FRONT_PIC,
        img_type: 3
      }
      // 身份证正面图片
      let back = {
        img_url: third.IDNUM_BACK_PIC,
        img_type: 4
      }
      Zlist.push(front)
      Zlist.push(back)

      let address = third.xiangxiAddress
      var shi = /.+?(市|县)/g
      let LOCATION = address.match(shi)[0]

      this.$http.addStaff({
        shenfenzheng: third.shenfenzheng, // '身份证号'
        STAFF_NAME: third.STAFF_NAME, //  '人员姓名'
        SEX: SEX, // '性别 1男 2女',
        BIRTHDAY: third.BIRTHDAY, //  '出生日期',
        LOCATION: LOCATION, // 市或县
        LOCATIONDETAIL: third.xiangxiAddress, // 详细地址
        xiangxiAddress: third.xiangxiAddress, // '详细地址', 通过身份证识别获得
        HOSPITAL_ID: first.hospitalID, // '归属医院',
        GRADUATE_SCHOOL: first.GRADUATE_SCHOOL, // '毕业学校',
        GRADUATE_DATE: first.GRADUATE_DATE, // '毕业时间',
        GRADUATE_CLASS: first.GRADUATE_CLASS, // '就读班级',
        INTRODUCE: first.INTRODUCE, // '介绍',
        Goodat: first.Goodat, // '擅长',
        MAJOR: first.MAJOR, // '专业级别/职称',
        DEPART: first.hosDEPART, // '科室',
        PLATFORM_DEPART: first.ptDEPART, // '平台服务科室',
        Zlist: Zlist})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            // this.$router.history.go(-3)
            this.$router.replace({path: '/Verification', query: {userid: this.userid}})
          } else {
            Toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          Toast('您的网络有些拥挤，请稍后再试')
        })
    },
    // 提交
    submit () {
      let daiHao = this.realNameInfo
      if (!daiHao.IDNUM_BACK_PIC) {
        Toast('请上传身份证正面图片')
        return false
      } else if (!daiHao.IDNUM_BACK_PIC) {
        Toast('请上传身份证反面图片')
        return false
      } else if (!(daiHao.STAFF_NAME || daiHao.SEX || daiHao.nation || daiHao.BIRTHDAY ||
      daiHao.xiangxiAddress ||
      daiHao.shenfenzheng)) {
        Toast('图片不清晰,请重新上传身份证正面图片')
        return false
      } else if (!(daiHao.jiguan ||
        daiHao.qixian)) {
        Toast('图片不清晰,请重新上传身份证反面图片')
        return false
      }
      this.ForData()
      this.submitShow = true
    },
    ForData () {
      if (this.realNameInfo.IDNUM_FRONT_PIC) {
        this.realNameInfo.frontFileList = []
        let obj = {
          url: this.realNameInfo.IDNUM_FRONT_PIC, isImage: true
        }
        this.realNameInfo.frontFileList.push(obj)
      }
      if (this.realNameInfo.IDNUM_BACK_PIC) {
        this.realNameInfo.reverseFileList = []
        let obj = {
          url: this.realNameInfo.IDNUM_BACK_PIC, isImage: true
        }
        this.realNameInfo.reverseFileList.push(obj)
      }
      let data = JSON.parse(sessionStorage.getItem('realNameData'))
      data.realNameInfo = this.realNameInfo
      sessionStorage.setItem('realNameData', JSON.stringify(data))
    },
    // 身份证正面上传
    uploadIDcardFront (file) {
      if (this.isSendBack === false) {
        Toast('身份证反面上传中请稍后...')
        return false
      }
      this.isSendFront = false
      file.status = 'uploading'
      file.message = '正在上传中...'
      lrz(file.file, {
        width: 2000,
        quality: 0.7 // 图片压缩质量，取值0-1，默认为0.7
      })
        .then((rst) => {
          this.$http.img({base64: rst.base64, type: 9})
            .then(res => {
              console.log(res)
              if (res.data.status === 'success') {
                this.getIDfront(res.data.data, file)
              }
            })
            .catch(err => {
              console.log(err)
            })
        })
        .catch((error) => {
          console.log('失败', error)
          // 失败时执行
        })
    },
    // 身份证正面返回信息
    getIDfront (data, file) {
      let frontUrl = data
      this.$http.renzhengZheng({url: frontUrl})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.realNameInfo.IDNUM_FRONT_PIC = frontUrl // 身份证正面图片
            let daiHao = res.data.data.front.words_result
            this.realNameInfo.STAFF_NAME = daiHao['姓名'].words
            this.realNameInfo.SEX = daiHao['性别'].words
            this.realNameInfo.nation = daiHao['民族'].words
            this.realNameInfo.BIRTHDAY = daiHao['出生'].words
            this.realNameInfo.xiangxiAddress = daiHao['住址'].words
            this.realNameInfo.shenfenzheng = daiHao['公民身份号码'].words
            this.isSendFront = true
            if (file) {
              file.status = ''
              file.message = ''
            }
          } else {
            this.isSendFront = true
            if (file) {
              file.status = ''
              file.message = ''
            }
            this.realNameInfo.frontFileList = []
            Toast(res.data.msg)
          }
        })
        .catch(err => {
          this.isSendFront = true
          if (file) {
            file.status = ''
            file.message = ''
          }
          this.realNameInfo.frontFileList = []
          console.log(err)
          Toast('您的网络有些拥挤，请稍后再试')
        })
    },
    // 上传身份证反面
    uploadIDcardBack (file) {
      if (this.isSendFront === false) {
        Toast('身份证正面上传中请稍后...')
        return false
      }
      this.isSendBack = false
      file.status = 'uploading'
      file.message = '正在上传中...'
      lrz(file.file, {
        width: 2000,
        quality: 0.7 // 图片压缩质量，取值0-1，默认为0.7
      })
        .then((rst) => {
          this.$http.img({base64: rst.base64, type: 9})
            .then(res => {
              console.log(res)
              if (res.data.status === 'success') {
                // realNameInfo
                // jiguan: '', // 签发机关
                //   qixian: '', // 有效期限
                //   IDNUM_BACK_PIC: '' // 身份证反面图片
                this.getIDback(res.data.data, file)
              }
            })
            .catch(err => {
              console.log(err)
            })
        })
        .catch((error) => {
          console.log('失败', error)
          // 失败时执行
        })
    },
    // 身份证反面返回信息
    getIDback (data, file) {
      let backUrl = data
      this.$http.renzhengFan({url: backUrl})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.realNameInfo.IDNUM_BACK_PIC = backUrl

            let daiHao = res.data.data.back.words_result
            this.realNameInfo.jiguan = daiHao['签发机关'].words

            let qianfa = daiHao['签发日期'].words
            let shixiao = daiHao['失效日期'].words
            let qianfaDate = qianfa.toString().substring(0, 4) + '.' + qianfa.substring(4, 6) + '.' + qianfa.substring(6, 8)
            let shixiaoDate = shixiao.toString().substring(0, 4) + '.' + shixiao.substring(4, 6) + '.' + shixiao.substring(6, 8)

            this.realNameInfo.qixian = qianfaDate + '-' + shixiaoDate

            this.isSendBack = true
            if (file) {
              file.status = ''
              file.message = ''
            }
          } else {
            this.realNameInfo.reverseFileList = []
            this.isSendBack = true
            if (file) {
              file.status = ''
              file.message = ''
            }
            Toast(res.data.msg)
          }
        })
        .catch(err => {
          this.realNameInfo.reverseFileList = []
          this.isSendBack = true
          if (file) {
            file.status = ''
            file.message = ''
          }
          console.log(err)
          Toast('您的网络有些拥挤，请稍后再试')
        })
    }
  }
}
</script>

<style scoped>
/deep/ .van-uploader__upload,
/deep/ .van-image,
/deep/ .van-uploader__preview-image{
  width: 44vw;
  height: 110px;
}
/deep/ .van-uploader__upload-text {
  margin-top: 8px;
  color: #969799;
  font-size: 12px;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 30px;
  line-height: 30px;
  background: #1da4f2;
  color: #fff;
  text-align: center;
}
/deep/ .van-uploader__upload,
/deep/ .van-image{
  background: #E8F6FE;
  border-radius: 10px;
  overflow: hidden;
}
/deep/ .van-icon__image {
  width: 4em;
  height: 3em;
  -o-object-fit: contain;
  object-fit: contain;
  margin-bottom: 23px;
}
.all{
  width: 100%;
  height: 100%;
  background: #FAF9FE;
  overflow: auto;
  font-size: 15px;
  font-family: PingFang SC;
}
.top{
  position: sticky;
  top: 0;
  z-index: 9;
}
header{
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #E5E5E5;
  background: white;
}
.div{
  width: 33%;
  height: 100%;
  display: flex;
  align-items: center;
  font-family: "PingFang SC";
  font-size: 15px;
  font-weight: bold;
}
.div img{
  margin-right: 5px;
}
.div:nth-child(1) img{
  height: 13px;
  width: 7px;
  margin-left: 15px;
}
.div:nth-child(3) img{
  margin-right: 5px;
  width: 13px;
  height: 13px;
}
.div:nth-child(3) span{
  margin-right: 15px;
}
.div:nth-child(2){
  justify-content: center;
}
.div:nth-child(3){
  justify-content: flex-end;
}
.solid{
  color: #1DA4F2;
}
.title{
  width: 100%;
  min-height: 44px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  background: #FFFFFF;
  padding: 0 15px;
  box-sizing: border-box;
  font-weight: bold;
}
.hengGang{
  display: block;
  width: 2px;
  border-radius: 1px;
  height: 15px;
  background: #1DA4F2;
  margin-right: 5px;
}
.imgDiv{
  width: 100%;
  padding: 10px 15px;
  box-sizing: border-box;
  margin: 0 auto;
  background: #FFFFFF;
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
.imgDiv img{
  /*width: 49%;*/
  width: 44vw;
}
.describe{
  background: #FFFFFF;
  font-size: 13px;
  font-weight: 500;
  color: #999999;
  padding: 0 15px;
  box-sizing: border-box;
}
.sign{
  font-size: 13px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #EC6941;
  padding: 0 15px;
  box-sizing: border-box;
}
.tips{
  min-height: 35px;
  background: #FEFAF8;
  color: #ED8052;
  font-size: 13px;
}
.tips,
.bottom{
  display: flex;
  align-items: center;
  justify-content: center;
}
.bottom{
  height: 60px;
  background: #FFFFFF;
  position: sticky;
  bottom: 0;
}
.keepButton{
  width: 92%;
  height: 44px;
  background: linear-gradient(90deg, #1DA3F2 0%, #1DC7F2 100%);
  border-radius: 10px;
  border: none;
  margin: 10px 3%;
  font-size: 17px !important;
  font-weight: bold;

}
.next{
  color: #FFFFFF;
}
.lastStep{
  border: 1px solid #1DA4F2;
  background: #FFFFFF;
  color: #1da4f2;
}

.menu{
  width: 100%;
  height: 60px;
  background: #1DA4F2;
  box-shadow: 0px 1px 0px 0px #E5E5E5;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow:hidden;
}
/*/ 选择框 开始样式/*/
/deep/ .el-steps--horizontal{
  width: 105%;
}
/deep/ .el-step.is-center .el-step__description{
  padding: 0;
}
/deep/ .el-step__description{
  margin: 0;
  font-size: 13px;
}
/deep/ .el-step__icon{
  width: auto;
  height: auto;
}
/deep/ .el-step__icon.is-text{
  border: none;
}
/deep/ .is-finish,
/deep/ .el-step__description.is-process{
  color: #fff;
}
/deep/ .el-step__description.is-finish{
  color: white !important;
}
/deep/ .el-step__description.is-wait{
  color: rgba(255, 255, 255, 0.7);
}
/deep/ .el-step__head.is-finish{
  border-color: #fff;
}
/deep/ .el-step__head.is-wait{
  border-color: transparent !important;
}
/deep/ .el-step__line{
  border-color: transparent !important;
}
/deep/ .el-step.is-horizontal .el-step__line{
  height: 1px;
  /*top:7px;*/
  top: 35%;
}
/deep/ .el-step__line{
  background: white;
}
/*/ 选择框 结束样式/*/
</style>
